<template>
  <div id="home">
    <nav-bar>
      <div slot="center">购物街</div>
    </nav-bar>

    <scroll
      @scroll="scroll"
      @pullingUp="pullingUp"
      :probeType="3"
      :pullUpLoad="true"
      class="content"
      ref="scroll"
    >
      <swiper>
        <swiper-item v-for="(item, index) in banners" :key="index">
          <a :href="item.link">
            <img :src="item.image" alt="" />
          </a>
        </swiper-item>
      </swiper>
      <recommend-view :recommends="recommends"></recommend-view>
      <feature></feature>

      <tab-control
        :title="['流行', '新款', '精选']"
        v-show="!isTabControl"
        @tabClick="tabClick"
      ></tab-control>
      <!-- 商品列表 -->
      <good-list :goods="goods[currentType].list"></good-list>
    </scroll>

    <top-back
      class="topback"
      @click.native="topBackClick"
      v-show="isShow"
    ></top-back>

    <tab-control
      :title="['流行', '新款', '精选']"
      v-show="isTabControl"
      class="tab-control"
      @tabClick="tabClick"
    ></tab-control>
  </div>
</template>

<script>
import NavBar from "commons/navbar/NavBar.vue";
import { getHomeMultidata, getHomeGoods } from "network/home";
import { Swiper, SwiperItem } from "commons/swiper";
import RecommendView from "./childComps/RecommendView.vue";
import Feature from "./childComps/Feature.vue";
import TabControl from "components/content/tabControl/tabControl.vue";
import GoodList from "../../components/content/goods/GoodList.vue";
import Scroll from "../../commons/scroll/Scroll.vue";
import TopBack from "../../components/content/topback/TopBack.vue";

export default {
  components: {
    NavBar,
    Swiper,
    SwiperItem,
    RecommendView,
    Feature,
    TabControl,
    GoodList,
    Scroll,
    TopBack
  },
  name: "",
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        news: { page: 0, list: [] },
        sell: { page: 0, list: [] }
      },
      currentType: "pop",
      isShow: false,
      isTabControl: false
    };
  },
  created() {
    this.getHomeMultidata();
    this.getHomeGood("pop");
    this.getHomeGood("news");
    this.getHomeGood("sell");
  },
  computed: {},
  methods: {
    async getHomeMultidata() {
      let res = await getHomeMultidata();
      this.banners = res.data.banner.list;
      this.recommends = res.data.recommend.list;
    },
    async getHomeGood(type) {
      const page = this.goods[type].page + 1;
      let res = await getHomeGoods(type, page);
      console.log(res);
      this.goods[type].list.push(...res.list);
      this.goods[type].page += 1;

      this.$refs.scroll.finishPullUp();
    },

    // 事件监听相关方法
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "news";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
    },

    // 监听滚动条
    scroll(position) {
      console.log(position);
      this.isShow = -position.y > 1400;
      this.isTabControl = -position.y > 670;
    },

    // 上拉加载
    pullingUp() {
      this.getHomeGood(this.currentType);
    },

    // 回到顶部
    topBackClick() {
      this.$refs.scroll.scrollTo(0, 0);
    }
  }
};
</script>
<style scoped>
img {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: auto;
  padding-top: 40px;
}
#home .content > *:last-child {
  padding-bottom: 60px;
}
#home {
  position: relative;
}
.tab-control {
  position: fixed;
  top: 40px;
  width: 100vw;
  z-index: 99;
}
.content {
  height: 100vh;
}
.jiazai {
  font-size: 14px;
  color: red;
}
</style>
